{% extends "base.html" %}
{% load cctags %}
{% load ccfilters %}

{% block css %}
<link type="text/css" rel="stylesheet" href="/static/styles/jqueryui/themes/base/jquery.ui.all.css"/>
<link type="text/css" rel="stylesheet" href="/static/styles/routes.css"/>
<style type="text/css">

</style>
{% endblock %}

{% block scripts %}
<script type="text/javascript" src="/static/js/jquery.blockUI.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        var efforts = [ '{% _ "n/a" %}', '{% _ "easiest" %}', '{% _ "easy" %}',
                    '{% _ "normal" %}', '{% _ "hard" %}', '{% _ "hardest" %}', '{% _ "HARDESTEST" %}'];
        var effort = $("#effort");
        effort.html(efforts[{{ ride.effort }}]);

        var weathers = $("#weathers");
        var ride_weathers = '{{ ride.weather }}';
        ride_weathers = ride_weathers.split(',');
        $(ride_weathers).each(function(index,item){
            item && $('#'+item, weathers).addClass("ui-selected");
        });

        build_img_info = function(bind_load){
            $("p.img_info").remove();

            $("#notes img").each(function(index,item){
                var img = $(item);

                var bind_info = function(img){
                    var info = img.attr("alt");
                    if (!info) return;
                    var info_div = $('<p class="img_info"></p>');
                    info_div.html(info);
                    info_div.css({
                        'background': 'rgba(0, 0, 0, 0.5)',
                        'font-size': '80%',
                        'position': 'absolute',
                        'color': '#eee',
                        'padding': '6px',
                        'font-style': 'italic',
                        'left': img.offset().left + "px",
                        'width': img.outerWidth() - 12 + "px"
                    });
                    $("body").append(info_div);
                    info_div.css({
                        'top': img.offset().top + img.height() - info_div.outerHeight() + "px"
                    })
                }

                if (bind_load) {
                    img.load(function(){
                        bind_info(img);
                    });
                } else {
                    bind_info(img);
                }
            });
        };

        build_img_info(true);
        setTimeout("build_img_info(false)",1000);

        var build_img_box = function(){
            $("#notes img").each(function(index,item){
                var img = $(item);
                img.css("cursor", "pointer");
                if($.blockUI){
                    var imgBox = $('<div><a id="photo_link" target="_blank"><img src="/static/images/loading.gif"/></a>' +
                                    '<div id="alt">test</div><a class="close">x</div></div>');
                    $("#photo_link", imgBox).attr('href', img.attr("src"));
                    $("#alt", imgBox).html(img.attr("alt"));
                    imgBox.css({
                        'width': '640px',
                        'height':'520px',
                        'position': 'relative'
                    })
                    $("img", imgBox).css({
                        'max-width': '640px',
                        'max-height': '480px',
                        'cursor': 'url("/static/images/zoom_in.cur"), pointer'
                    });
                    $(".close", imgBox).click(function(){
                        $.unblockUI();
                    });
                    img.click(function() {
                        var top = ($(window).height() - 520) /2;
                        var left = ($(window).width() - 640) /2;
                        top = top > 0 ? top : 0;
                        left = left > 0 ? left : 0;
                        $.blockUI({
                            message: imgBox,
                            css: {
                                top:  top + 'px',
                                left: left + 'px',
                                height: '520px',
                                width: '640px'
                            },
                            onBlock: function() {
                                $("img", imgBox).attr('src', img.attr("src"));
                                $('.blockOverlay').attr('title','{% _ "Click to unblock" %}').click($.unblockUI);
                            }
                        });
                    });
                }
            });
        };

        build_img_box();

        {% if user and ride.Rider == user %}
        var editor;
        CKEDITOR.config.language = "{{ lang }}";
        CKEDITOR.config.height = 400;

        //CKEDITOR.config.filebrowserImageUploadUrl ='{{site_settings.depot_site}}/ckupload/';
        function createEditor(show) {
            if (editor)
                editor.destroy();

            if ( show ) {
                editor = CKEDITOR.replace( 'notes', {
                    removePlugins : 'elementspath'
                });
            } else {
                build_img_box();
                setTimeout("build_img_info(false)",500);
            }
        }
        addUploadButton();
        function addUploadButton(){
            CKEDITOR.on('dialogDefinition', function( ev ){
                var dialogName = ev.data.name;
                var dialogDefinition = ev.data.definition;
                if ( dialogName == 'image' ){
                    var infoTab = dialogDefinition.getContents( 'info' );
                    infoTab.add({
                        type : 'button',
                        id : 'upload_image',
                        label : '{% _ "Upload Image" %}',
                        onClick : function( evt ){
                           var thisDialog = this.getDialog();
                           var txtUrlObj = thisDialog.getContentElement('info', 'txtUrl');
                           var txtUrlId = txtUrlObj.getInputElement().$.id;
                           addUploadImage(txtUrlId);
                       }
                    }, 'browse'); //place front of the browser button
                }
            });
        }
        function addUploadImage(theURLElementId){
            var uploadUrl = "{% url views.upload %}";
            var imgUrl = window.showModalDialog(uploadUrl,"","dialogWidth=220px;dialogHeight=120px;status=yes;");
            if(!imgUrl){
                return;
            }
            var urlObj = document.getElementById(theURLElementId);
            urlObj.value = imgUrl;
            var evt = document.createEvent('HTMLEvents');
            evt.initEvent('change',true,true);
            try{
                urlObj.dispatchEvent(evt);
            }catch(err){
                urlObj.fireEvent("onchange");
            }
        }

        var show_editor = true;
        $("#edit_note").click(function(){
            $("p.img_info").remove();
            createEditor(show_editor);
            $("#save_note").toggle(show_editor);
            $("#edit_note").html(show_editor ? '{% _ "Cancel" %}' : '{% _ "Edit" %}');

            show_editor = !show_editor;
        });

        $("#save_note").click(function(){
            if ( editor )
            {
                var notes = $.trim(editor.document.getBody().getText());
                if(notes.length <= 0){
                    if(!confirm('{% _ "r u sure submit without notes" %}?'))
                        return;
                }

                notes = $.trim(editor.document.getBody().getHtml());
                $.post("{% url apis.apisviews.rest %}",
                        {method:"update_ride_notes",
                            rideid: '{{ ride.id }}',
                            notes: notes
                        },
                        function(data){
                            data = JSON.parse(data);
                            if (data.status=="ok") {
                                $.blockUI({
                                    fadeOut: 500, timeout: 1000,
                                    message: '<h1 style="margin:8px">{% _ "Ride Saved" %}</h1>'
                                });
                            } else {
                                $.blockUI({
                                    message: '<h1 style="margin:8px;color:red">'+data.message+'</h1>'
                                });
                                $('.blockOverlay').click($.unblockUI);
                            }
                        }
                );
                $.blockUI({message: '<h1 style="margin:8px">{% _ "Saving" %}</h1>'});
            }
        });
        {% endif %}
    });
</script>
{% endblock %}

{% block menu %}
{% include '_menu_rides.html' %}
{% endblock %}

{% include '_photo_upload_form.html' %}

{% block main-page %}
<div id="showride_page">
    <h1 class="group_title">{% _ "Ride" %} <img style="vertical-align: text-bottom;" src="/static/images/rides.png"/>{{ ride.name }} </h1>
    <h3>
        {% _ "By" %}
        <a href="{% url riders.ridersviews.userpage ride.rider.uid %}">
        {{ ride.rider.name }}</a>
        {% _ "Created on" %}
        {{ ride.create_datetime|cctimesince }} {% _ "ago" %}
    </h3>
    <div class="showride_list">
        {% with ride.route as route %}
            {% include '_route_panel.html' %}
        {% endwith %}
    </div>
    <div class="showride_list">
        {% with ride.bike as bike %}
        <div  class="step_list">
            <span class="item_title">{%  _ bike.type %} <img style="max-height: 80px;max-width: 80px"
                 src="{{ bike.photourl|default:"/static/images/bike.gif"|safe }}" alt="{{ bike.name }}"/>
            {{ bike.name }}</span>
            <span>
            {% if biek.frame %}{% _ "Frame" %}: {{ bike.frame }}{% endif %}
            {% if biek.fork %}{% _ "Fork" %}: {{ bike.fork }}{% endif %}
            {% if biek.components %}{% _ "Components" %}: {{ bike.components }}{% endif %}
            {% if biek.wheels %}{% _ "Wheels" %}: {{ bike.wheels }}{% endif %}
            </span>
        </div>
        {% endwith %}
        <div  class="step_list">
            <span id="starttime_p">
                <span class="item_title">{% _ "Start DateTime" %}</span>

                <label>
                    {% if user %}
                    {{ ride.start_datetime|timezone:user.timezone|date:"Y-m-d H:s" }}
                    {% else %}
                    {{ ride.start_datetime|timezone:0|date:"Y-m-d H:s" }} UTC
                    {% endif %}
                </label>


            </span>
            <span id="endtime_p">
                <span class="item_title">{% _ "End DateTime" %}</span>
                <label>
                    {% if user %}
                    {{ ride.end_datetime|timezone:user.timezone|date:"Y-m-d H:s" }}
                    {% else %}
                    {{ ride.end_datetime|timezone:0|date:"Y-m-d H:s" }} UTC
                    {% endif %}
                </label>
            </span>
            <span class="item_title"> {% _ "Duration" %}</span>
                <label>{{ ride.duration }}
                {% _ "hours" %}  {% _ "on bike" %}
                </label>
        </div>
        <div  class="step_list">
            <span class="item_title weather_title">{% _ "Weather" %}</span>
            <ul id="weathers">
                <li class="weather" id="sunny" title="{% _ 'Sunny' %}">
                </li>
                <li class="weather" id="sunny_interval" title="{% _ 'Sunny Interval' %}">
                </li>
                <li class="weather" id="cloudy" title="{% _ 'Cloudy' %}">
                </li>
                <li class="weather" id="overcast" title="{% _ 'Overcast' %}">
                </li>
                <li class="weather" id="light_rain" title="{% _ 'Light Rain' %}">
                </li>
                <li class="weather" id="rain" title="{% _ 'Rain' %}">
                </li>
                <li class="weather" id="thunderstorms" title="{% _ 'Thunderstorms' %}">
                </li>
                <li class="weather" id="snow" title="{% _ 'Snow' %}">
                </li>
                <input type="hidden" id="weather" name="weather" value=""/>
            </ul>
        </div>
        <div  class="step_list">
            <span class="item_title">{% _ "Effort" %}</span>
            <span id="effort"></span>
        </div>
    </div>
     <div class="showride_list">
        <div class="step_list">
            <span class="item_title">{% _ "Notes" %}</span>
            <span> {% _ "Latest Updated" %} {{ ride.update_datetime|cctimesince }} {% _ "ago" %}</span>
            {% if user and ride.Rider == user %}
                <span><a id="edit_note" href="javascript:;" class="yellowbutton">{% _ "Edit" %}</a></span>
                <span><a id="save_note" href="javascript:;" class="yellowbutton hide">{% _ "Save" %}</a></span>
            {% endif %}
            <div class="step_list">
                <div id="notes" name="notes" class="weather_title">{{ ride.notes|safe }}</div>
            </div>
            {% if user and ride.Rider == user %}
            <script type="text/javascript" src="/static/js/ckeditor/ckeditor.js"></script>
            {% endif %}
        </div>
    </div>
    <div id="social_comments" class="step_list">
        <!-- UY BEGIN -->
        <div id="uyan_frame"></div>
        <!-- UY END -->
        <script type="text/javascript">
        var uyan_config = {
             'title':'{% _ "Ride" %} {{ ride.name }} -- MagiCycles迈记网',
             'pic':'{{ ride.route.preview_url|removetags:"script object iframe"|safe }}'
        };
        </script>
        <script type="text/javascript" id="UYScript" src="http://v1.uyan.cc/js/iframe.js?UYUserId=1739828" async=""></script>
    </div>
</div>
{% endblock %}
